<template>
  <div class="mb-2 md:mb-0 md:w-auto">
    <IButton
      v-if="customizeable && withCustomizeButton"
      variant="white"
      icon="Cog"
      @click="customizeTable"
    />
  </div>

  <ResourceTableSettingsCustomization
    ref="customizationRef"
    :table-id="tableId"
    :url-path="urlPath"
  />
</template>

<script setup>
import { ref } from 'vue'

import { useTable } from '@/Core/composables/useTable'

import ResourceTableSettingsCustomization from './ResourceTableSettingsCustomization.vue'

const props = defineProps({
  tableId: { required: true, type: String },
  resourceName: { type: String, required: true },
  urlPath: { required: true, type: String },
  customizeable: Boolean,
  withCustomizeButton: Boolean,
})

const { customizeTable } = useTable(props.tableId)

const customizationRef = ref(null)

defineExpose({ customizationRef })
</script>
